import React, { Component } from 'react';
import Button from 'antd/lib/button';

const Test = (props) => (<div>hello !!</div>)

class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentWillMount() {
    console.log('componentWillMount');
  }

  componentDidMount() {
    console.log('componentDidMount');
  }

  componentWillReceiveProps(nextProps) {
    console.log('componentWillReceiveProps', nextProps);
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log('nextProps, nextState', nextProps, nextState);
    return true;
  }

  componentWillUpdate() {
    console.log('componentWillUpdate');
  }

  componentDidUpdate () {
    console.log('componentDidUpdate');
  }

  componentWillUnmount() {
    console.log('componentWillUnmount');
  }

  render() {
    console.log('render');
    return (
      <div>
        <h1>{this.props.value}</h1>
        <h1>{this.state.date.toLocaleTimeString()}</h1>
      </div>
    )
  }
}

class Lifecycle extends Component {
  constructor(props) {
    super(props);
    this.state = {visible: true, year: 2017};
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick () {
    this.setState(prevState => ({
      visible: !prevState.visible
    }));
    setTimeout(() => {
      if (this.state.visible) {
        this.setState({year: 2018});
      }
    }, 0);
  }

  render() {
    return (
      <div className="app-headers">
        <Test/>
        {this.state.visible ? (<Child value={this.state.year}/>) : (<h1>00:00:00</h1>)}
        <Button type="primary" onClick={this.handleClick}>Button</Button>
      </div>
    );
  }
}

export default Lifecycle;
